import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Link, withRouter} from 'react-router-dom'
import Face from '../../component/face'
import {Button, Menu, Icon, Spin, Descriptions} from 'antd'
import {logout, queryParse, get} from '../../common/js/utils'
import './user.scss'

function mapStateToProps(state, props) {
  return {
    userInfo: state.get('userInfo')
  }
}

let navs = [{
  name: '基本信息',
  icon: 'user',
  path: '/user/setting'
}, {
  name: '修改密码',
  icon: 'setting',
  path: '/user/password'
}, {
  name: '我的评论',
  icon: 'file-done',
  path: '/user/comments'
}, {
  name: '我的回复',
  icon: 'file-text',
  path: '/user/replies'
}, {
  name: '@我的',
  icon: 'info',
  path: '/user/reply-to-me'
}]

@withRouter
@connect(mapStateToProps)
class UserRouter extends Component {

  componentWillMount() {
    const {location} = this.props
    this.search = queryParse(location.search)
  }

  render() {
    const search = this.search
    const {children, userInfo} = this.props
    if (search._id && userInfo.get('_id') !== search._id) {
      return (
        <UserRouterForOthers>
          {children}
        </UserRouterForOthers>
      )
    } else {
      return (
        <UserRouterForMe>
          {children}
        </UserRouterForMe>
      )
    }
  }
}

@withRouter
class UserRouterForOthers extends Component {

  componentWillMount() {
    const {location} = this.props
    this.search = queryParse(location.search)
    this.getInfo()
  }

  state = {
    userInfo: {},
    loading: true
  }
  navs = []

  getInfo = () => {
    get('/api/users/detail', {
      _id: this.search._id
    }, loading => this.setState({loading})).then(res => {
      if (res.result === 1) {
        let sex
        if (res.data.sex === 0) {
          sex = '她'
        } else {
          sex = '他'
        }
        this.navs = [{
          name: '基本信息',
          icon: 'user',
          path: `/user?_id=${this.search._id}`
        }, {
          name: `${sex}的评论`,
          icon: 'file-done',
          path: `/user/comments?_id=${this.search._id}`
        }, {
          name: `${sex}的回复`,
          icon: 'file-text',
          path: `/user/replies?_id=${this.search._id}`
        }, {
          name: `@${sex}的`,
          icon: 'info',
          path: `/user/reply-to-me?_id=${this.search._id}`
        }]
        this.setState({
          userInfo: res.data
        })
      }
    })
  }

  render() {
    const {userInfo, loading} = this.state
    const {children, location} = this.props
    if (loading) return (
      <div
        style={{
          padding: '20px 0',
          textAlign: 'center'
        }}
      >
        <Spin
          size="large"
        />
      </div>
    )

    return (
      <div className="user" >
        <div className="header" >
          <div className="face common-hover" onClick={this.handleFace} >
            <img src={userInfo.face} alt={userInfo.nickname} title="更换头像" />
          </div>
          <h1 title={userInfo.nickname}>{userInfo.nickname}</h1>
          <Link className="back" to="/">回到首页</Link>
        </div>
        <div className="bot-content" >
          <Menu
            onClick={this.handleClick}
            style={{
              width: 200,
              height: 'calc(100% - 200px)',
              overflowY: 'auto',
              overflowX: 'hidden',
              position: 'absolute',
              left: 0,
              bottom: 0,
              background: 'rgba(255,255,255,.7)'
            }}
            defaultSelectedKeys={[location.pathname + location.search]}
            mode="inline"
          >
            {
              this.navs.map(item => (
                <Menu.Item key={item.path} >
                  <Link to={item.path}>
                    <Icon type={item.icon} /> {item.name}
                  </Link>
                </Menu.Item>
              ))
            }
          </Menu>
          <div className="router-content-box">
            <div className="router-content">
              {
                children ?
                  children :
                  <Descriptions title="用户信息">
                    <Descriptions.Item label="昵称">{userInfo.nickname || '无'}</Descriptions.Item>
                    <Descriptions.Item label="邮箱">{userInfo.email || '无'}</Descriptions.Item>
                    <Descriptions.Item label="性别">
                      {
                        userInfo.sex === 1 ?
                          <Icon className="nan" type="man" /> :
                          <Icon className="nv" type="woman" />
                      }
                      {
                        userInfo.sex === 1 ?
                          '男' :
                          '女'
                      }
                    </Descriptions.Item>
                    <Descriptions.Item label="个人介绍">{userInfo.introduce || '无'}</Descriptions.Item>
                  </Descriptions>
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}

@connect(mapStateToProps)
@withRouter
class UserRouterForMe extends Component {

  handleFace = e => {
    this.face.show()
  }

  handleClick = e => {
    // key:
  }

  componentWillMount() {
    if (this.props.userInfo.get('status') !== 1) {
      this.props.history.replace(`/login?redirect=${encodeURIComponent('/user')}`)
    }
  }

  render() {
    const {children, userInfo} = this.props
    const face = userInfo.get('face')
    const nickname = userInfo.get('nickname')

    return (
      <div className="user" >
        <Face onRef={c => this.face = c} face={face} />
        <div className="header" >
          <div className="face common-hover" onClick={this.handleFace} >
            <img src={face} alt={nickname} title="更换头像" />
          </div>
          <h1 title={nickname}>{nickname}</h1>
          <Link className="back" to="/">回到首页</Link>
        </div>
        <Button
          type="danger"
          icon="poweroff"
          size="small"
          className="logOut-btn"
          onClick={e => logout(() => {this.props.history.replace('/')})}>退出</Button>
        <div className="bot-content" >
          <Menu
            onClick={this.handleClick}
            style={{
              width: 200,
              height: 'calc(100% - 200px)',
              overflowY: 'auto',
              overflowX: 'hidden',
              position: 'absolute',
              left: 0,
              bottom: 0,
              background: 'rgba(255,255,255,.7)'
            }}
            defaultSelectedKeys={[this.props.match.url]}
            mode="inline"
          >
            {
              navs.map(item => (
                <Menu.Item key={item.path} >
                  <Link to={item.path}>
                    <Icon type={item.icon} /> {item.name}
                  </Link>
                </Menu.Item>
              ))
            }
          </Menu>
          <div className="router-content-box">
            <div className="router-content">
              {
                children
                  ? children
                  : <div>
                      <Icon
                        style={{
                          fontSize: 22,
                          color: 'green',
                          verticalAlign: 'middle'
                        }}
                        type="smile" />
                      <span
                        style={{
                          display: 'inline-block',
                          verticalAlign: 'middle',
                          padding: '0 0 0 10px'
                        }}
                      >欢迎您！ {nickname}</span>
                    </div>
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default UserRouter
